<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <title>木叶忍者村</title>
    <style>
        .pic img {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2"> 
                <div class="logo">
                    <a href="index.html"><img src="images/logo.png" alt="" class="hidden-xs"></a>
                    <a href="index.html"><span class="visible-xs">火影忍者联盟</span></a>
                </div>
                <div class="nav">
                    <ul>
                        <li>
                            <a href="muye.html" class="glyphicon glyphicon-leaf">木叶村</a>
                        </li>
                        <li>
                            <a href="wuyin.html" class="glyphicon glyphicon-eye-close">雾隐村</a>
                        </li>
                        <li>
                            <a href="yanyin.html" class="glyphicon glyphicon-queen">岩隐村</a>
                        </li>
                        <li>
                            <a href="yunyin.html" class="glyphicon glyphicon-cloud">云隐村</a>
                        </li>
                        <li>
                            <a href="shayin.html" class="glyphicon glyphicon-hourglass">砂隐村</a>
                        </li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7 pic">
                <h3>五大强村之木叶忍者村</h3>
                <h4>木叶村的由来</h4>
                <p>木叶隐村乃五个最强大的隐村之一，该村子隶属火之国，由初代目火影、二代目火影、宇智波斑共同建立。从战乱时代两个忍者家族以命相搏彼此视仇，到宇智波和千手联盟，建成忍者的桃源乡，为追求和平而诞生的忍村，同时也是忍界史上第一个建立的忍者村。</p>
                <p>“木”代表森之千手一族（千手一族领袖千手柱间拥有木遁的血继界限），“叶”代表宇智波一族（宇智波一族族徽外形是扇叶）。木叶村的整体是个扇形， 当任何人走进木叶时，第一眼就会看到矗立在木叶最高峰的历代火影的石像。</p>
                <img src="upload/m1.jpg" class="img-responsive" alt="">
                <h4>木叶历代火影</h4>
                <p>初代火影·千手柱间:擅长使用“木遁秘术”，具有操控尾兽的能力；平定乱世，在五影大会中听从扉间以金钱换尾兽的提议将尾兽平均分配给五大国，并在终末之谷一战中打败宇智波斑。他是宇智波斑唯一敬畏的忍者，与宇智波斑一同被称为“传说中的忍者”。被忍界誉为“忍者之神”</p>
                <p>二代目火影千手扉间:初代火影的弟弟、木叶村的建立者之一，建立忍者学校、暗部、木叶警务部队等，对村子的兴旺发达做出了杰出的贡献。擅长研发忍术，开发了「飞雷神之术」、「影分身之术」以及禁术「秽土转生」，对后世带来了很大的影响，闻名于忍界。</p>
                <p>三代目火影猿飞日斩:初代火影和第二代火影的亲传弟子，培育出了威震忍界的“三忍”。能够自如使用五种查克拉属性，精通木叶所有忍术，享有“忍术教授”的称号。且猿飞日斩是忍界史上实际执掌火之国最高权力时间最长的火影，也是最长寿的火影，开创了木叶隐村的全盛时期。</p>
                <p>四代目火影波风水门：在战斗中常以速度取胜，而有着“黄色闪光”的称号，亦以此在忍界中扬名，是第三次忍界大战中木叶的功臣之一。在以生命为代价封印九尾拯救村子后，被称之为守护木叶的英雄。</p>
                <p>五代目火影纲手：精通医疗忍术的女忍者，擅长使用医疗忍术与“怪力”（将大量查克拉精确细致地提炼出来并迅速把其燃烧），在医疗忍术方面技术非常高超，堪称《火影忍者》里的“医圣”。她不单单只是优秀的医疗忍者，更有出色的战斗力，在第四次忍界大战中有着活跃表现。</p>
                <p>六代目火影旗木卡卡西：年仅12岁就成为上忍的天才忍者，后左眼移植宇智波带土的写轮眼，因使用写轮眼复制了上千种忍术而被称为“拷贝忍者”、“写轮眼卡卡西”，其名号响彻各国。</p>
                <p>七代目火影漩涡鸣人：</p>
                <img src="upload/huoying.jpg" class="img-responsive" alt="">
                <textarea class="form-control" rows="3">留下友好的交流评论吧~写完你也提交不了哈哈哈，因为我没完善这个功能~略略略~</textarea>
                <button type="button" class="btn btn-info">发表</button>
                <ul>
                    
                </ul>
            </article>
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="upload/banner.png" alt="">
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">登录</span>
                    <h4 class="text-primary">火影忍者联盟</h4>
                    <p class="text-muted">Peace&love</p>
                </a>
            </aside>
        </div>
    </div>
    <script>
        //留言发布
        $(function () {
            $(".btn").on("click", function(){
                var li =$("<li></li>");
                li.html($(".form-control").val() + "<a href='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".form-control").val("");
            })
            //删除留言 动态创建的a 可以通过on绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                })
            })
            
        })
    </script>
</body>
</html>